@media (max-width: 1024px) {
            .course h1 { font-size: 3.5rem; }
            .sub_heading span { font-size: 1.8rem; }
            .img .user img { max-width: 350px; }
        }

        @media (max-width: 768px) {
            .bannar_created-by_suva { 
                flex-direction: column-reverse; 
                text-align: center; 
                padding: 80px 20px;
                overflow: hidden; /* Prevent horizontal scroll from floating boxes */
            }
            .course, .img { width: 100%; }
            .course .l_online, .sub_heading .sub_container, .catagori, .button { 
                justify-content: center; 
            }
            .img { margin-bottom: 60px; }
            .course h1 { font-size: 2.5rem; }
            .box2 .sub_info { right: 0; top: 10%; }
            .box2 .sub_info2 { left: 0; bottom: 10%; }
            
            /* Adjust floating boxes for mobile so they don't cause scroll */
            .box2 .sub_info, .box2 .sub_info2 {
                padding: 10px 15px;
                transform: scale(0.9);
            }
        }